<template>
	<div>
		<div class="layout-padding w40" style="padding-right: 0 !important">
			<div class="layout-padding-auto layout-padding-view">
				<el-row class="ml10" v-show="showSearch">
					<el-form :inline="true" :model="state.queryForm" ref="queryRef">
						<el-form-item label="体检编号" prop="examNo">
							<el-input v-model="state.queryForm.examNo" placeholder="请输入体检编号" />
						</el-form-item>
						<el-form-item>
							<el-button @click="getDataList" formDialogRef icon="search" type="primary">
								{{ $t('common.queryBtn') }}
							</el-button>
							<el-button @click="resetQuery" formDialogRef icon="Refresh">{{ $t('common.resetBtn')
								}}</el-button>
						</el-form-item>
					</el-form>
				</el-row>

				<el-row>
					<div class="mb8" style="width: 100%">
						<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
							v-auth="'blood_bloodxExam_add'">
							新增
						</el-button>
						<el-button plain :disabled="multiple" icon="Delete" type="primary"
							v-auth="'blood_bloodxExam_del'" @click="handleDelete(selectObjs)">
							删除
						</el-button>

						<!--            <el-button icon="user" type="warning" plain class="ml10" @click="examCustomer">-->
						<!--              体检居民-->
						<!--            </el-button>-->
						<right-toolbar v-model:showSearch="showSearch" :export="'blood_bloodxExam_export'"
							@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
							@queryTable="getDataList"></right-toolbar>
					</div>
				</el-row>
				<el-table size="small" :data="state.dataList" v-loading="state.loading" border
					:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
					@selection-change="selectionChangHandle" highlight-current-row @current-change="handleCurrentChange"
					@sort-change="sortChangeHandle">
					<el-table-column type="selection" width="40" align="center" />
					<el-table-column type="index" label="#" width="40" />
					<!--          <el-table-column prop="name" label="体检名称" show-overflow-tooltip/>-->
					<el-table-column prop="examNo" label="体检编号" show-overflow-tooltip />
					<el-table-column prop="sheetsNumber" label="标签纸张数" show-overflow-tooltip />
					<el-table-column prop="startTime" width="95" label="开始时间" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.startTime?.substring(0, 10) }}
						</template>
					</el-table-column>
					<el-table-column prop="endTime" width="95" label="结束时间" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.endTime?.substring(0, 10) }}
						</template>
					</el-table-column>
					<el-table-column prop="startNo" label="开始序号" show-overflow-tooltip />
					<el-table-column prop="endNo" label="结束序号" show-overflow-tooltip />
					<el-table-column prop="remark" label="备注" show-overflow-tooltip />
					<el-table-column label="操作" width="100" fixed="right">
						<template #default="scope">
							<el-button icon="edit-pen" text type="primary" v-auth="'blood_bloodxExam_edit'"
								@click="formDialogRef.openDialog(scope.row.id)">编辑
							</el-button>
							<!--              <el-button icon="delete" text type="primary" v-auth="'blood_bloodxExam_del'"-->
							<!--                         @click="handleDelete([scope.row.id])">删除-->
							<!--              </el-button>-->
						</template>
					</el-table-column>
				</el-table>
				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
					v-bind="state.pagination" />
			</div>

			<!-- 编辑、新增  -->
			<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
		</div>

		<bloodx-exam-customer ref="bloodFormDialogRef" />
		<!--      </div>-->
		<!--    </div>-->
	</div>
</template>

<script setup lang="ts" name="bloodxExam">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getfetchList, delObjs } from '/@/api/blood/bloodxExam';
import { useMessage, useMessageBox } from '/@/hooks/message';
// import {useDict} from '/@/hooks/dict';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const BloodxExamCustomer = defineAsyncComponent(() => import('../bloodxExamCustomer/index.vue'));
// 定义查询字典

// const {bloodx_exam} = useDict('bloodx_exam')
// 定义变量内容
const formDialogRef = ref();
const bloodFormDialogRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
// const currentRow = ref()

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getfetchList,
	descs: ['create_time'],
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

// 导出excel
const exportExcel = () => {
	downBlobFile('/blood/bloodxExam/export', Object.assign(state.queryForm, { ids: selectObjs }), 'bloodxExam.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

const handleCurrentChange = (row: any) => {
	// console.log(row)
	localStorage.setItem('item', JSON.stringify(row))
	// currentRow.value = row
	bloodFormDialogRef.value.openExamData(row);
};

// const examCustomer = () => {
//   if (!currentRow.value) {
//     useMessage().warning('请选择一条数据')
//     return
//   }
//   bloodFormDialogRef.value.openExamData(currentRow.value)
// }

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getDataList();
		useMessage().success('删除成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>
